<template>
  <div>
    <div class="top">
      <div class="title">版本管理</div>
      <li-select-mould
        v-model="model.id"
        style="width: 60%"
        :disabled="disabled"
        :version-disabled="model.versionDisabled"
        @change="mouldChange"
      />
      <a-button class="add-ver" style="margin-left: 10px" @click="OnAddVer">新增版本</a-button>
    </div>
    <SelectMonth ref="SelectMonth" class="year-month" @OnYearMonth="OnYearMonth"/>
    <a-spin :spinning="confirmLoading">
      <div class="version">
        <!--        {{ item.id+'&&'+item.templateId }}-->
        <a-card
          v-for="(item, index) in versionArr"
          :key="index"
          class="position-icon"
          style="border-radius: 10px"
          :class="item.versionStatus == '1' ? 'checked' : ''"
        >
          <div class="left-sidebar">
            <span class="version-text">V{{ item.version }}</span>
            <div class="icon-styly">
              <div class="dot"></div>
            </div>
            <div class="vh-line"></div>
          </div>
          <header>
            <div class="left">
              <span>{{ item.createTime }}</span>
              <span v-if="item.versionStatus == '2'" class="neverStart">从未启用</span>
            </div>
            <div class="createTag" v-if="item.versionStatus == '2'"><span></span></div>
            <div class="right"
                 :class="item.versionStatus == '1' ? 'checkShow' : item.versionStatus == '2'?'checkShow marginRight':''">
              <a-icon
                v-if="item.versionStatus == '2'"
                style="margin-right: 10px; color: #3955a5;line-height: 25px"
                type="edit"
                @click="editVersion(item)"
              />
              <a-icon
                v-if="item.versionStatus == '2'"
                style="margin-right: 10px; color: #3955a5;line-height: 25px"
                type="delete"
                @click="deleteVersion(item)"
              />
              <span
                v-if="item.versionStatus == '1'"
                style="margin-right: 10px; color: #3955a5; font-weight: bold; font-size: 14px"
              >
                当前启用版本
              </span>
              <a-switch
                checked-children="启用"
                un-checked-children="停用"
                :checked="item.versionStatus == '1'"
                @change="(e) => {
                   checkboxChange(item, e)
                  }"
              />
              <div class="newtag" v-if="item.versionStatus == '1'"><span></span></div>
            </div>
          </header>
          <div>
            说明：
            <j-ellipsis :value="item.remarks" :length="25"/>
          </div>
          <div class="fileList">
            <a-table
              ref="table"
              size="default"
              row-key="fileId"
              :columns="columns"
              :pagination="false"
              :data-source="item.tmList"
              :scroll="{ y: 125 }"
              :row-class-name="tableRowClassName"
              class="file-table"
            >
              <template slot="rowIndex" slot-scope="text, record">
                <span style="font-weight:bold; color: rgb(140,186,97);font-size:14px">{{record.index+1}}</span>
              </template>
              <template slot="icon" slot-scope="text, record">
                <img :src="fileIcon" alt=""/>
              </template>
              <template slot="fileName" slot-scope="text, record">
                <j-ellipsis :value="text" :length="12"/>
              </template>
              <span slot="action" slot-scope="text, record">
                <a-button type="link" title="预览" @click="OnPerview(record)"> <a-icon type="eye"/></a-button>
                <a-button type="link" title="下载" @click="OnDownLoad(record)">
                  <a-icon type="vertical-align-bottom"
                  /></a-button>
              </span>
            </a-table>
          </div>
        </a-card>
      </div>
    </a-spin>
    <AddVersionModal ref="AddVersionModal" @ok="versionList"/>
  </div>
</template>

<script>
  import {deleteAction, getAction, putAction} from '@/api/manage'
  import AddVersionModal from './addVersion/AddVersionModal'
  import SelectMonth from '@/views/sj/components/SelectMonth'
  import fileIcon from '../../icon/file.png'
  import liSelectMould from '../../../components/liSelectMould'
  import {Base64} from 'js-base64'

  const columns = [
    {
      title: '序号',
      dataIndex: 'rowIndex',
      key: 'rowIndex',
      width: 20,
      align: 'center',
      scopedSlots: {customRender: 'rowIndex'}
    },
    {
      title: 'icon',
      width: 30,
      align: 'right',
      dataIndex: 'icon',
      scopedSlots: {customRender: 'icon'},
      key: 'icon',
    },
    {
      title: '文件名',
      align: 'left',
      dataIndex: 'fileName',
      scopedSlots: {customRender: 'fileName'},
      key: 'fileName',
    },
    {
      title: '操作',
      align: 'right',
      dataIndex: 'action',
      width: 110,
      slots: {title: 'actionName'},
      scopedSlots: {customRender: 'action'},
    },
  ]
  export default {
    name: 'VersionForm',
    components: {
      SelectMonth,
      AddVersionModal,
      liSelectMould,
    },
    props: {
      // 表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false,
      },
    },
    data() {
      return {
        model: {},
        queryParam: {},
        confirmLoading: false,
        versionArr: [],
        files: [],
        url: {
          getVersionlist: '/sjtb/dataCollectionTemplateVersion/getVersionlist',
          startVersion: '/sjtb/dataCollectionTemplateVersion/editStatus',
          deleteVersion: '/sjtb/dataCollectionTemplateVersion/delete',
        },
        columns: columns,
        fileIcon: fileIcon,
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      },
    },
    created() {
      this.modelDefault = JSON.parse(JSON.stringify(this.model))
    },
    methods: {
      OnAddVer() {
        const rowId = this.model.id
        this.$refs.AddVersionModal.add(rowId)
        this.$refs.AddVersionModal.title = '新增版本'
        this.$refs.AddVersionModal.disableSubmit = false
        // this.$refs.AddVersionModal.versionDisabled = this.model.versionDisabled
      },
      editVersion(record) {
        this.$refs.AddVersionModal.edit(record)
        this.$refs.AddVersionModal.title = '修改版本'
        this.$refs.AddVersionModal.disableSubmit = false
        // this.$refs.AddVersionModal.versionDisabled = this.model.versionDisabled
      },
      deleteVersion(record) {
        console.log(222)
        deleteAction(this.url.deleteVersion, {id: record.id})
          .then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              this.versionList()
            } else {
              this.$message.warning(res.message)
            }
          })
          .finally(() => {
          })
      },
      OnYearMonth(data) {
        const YearMonth = data
        const year = YearMonth.year
        const month = YearMonth.month < 10 ? '0' + YearMonth.month : YearMonth.month
        this.queryParam = {templateId: this.model.id, queryTime: year + month}
        this.versionList()
      },
      edit(record) {
        this.model = Object.assign({}, record)
        const YearMonth = this.$refs.SelectMonth.getYearMonth()
        const year = YearMonth.year
        const month = YearMonth.month < 10 ? '0' + YearMonth.month : YearMonth.month
        this.queryParam = {templateId: this.model.id, queryTime: year + month}
        this.versionList()
        this.visible = true
      },
      mouldChange() {
        this.queryParam.templateId = this.model.id
        this.versionList()
      },
      versionList() {
        this.versionArr = []
        this.confirmLoading = true
        getAction(this.url.getVersionlist, this.queryParam).then((res) => {
          if (res.success) {
            this.versionArr = res.result.records || res.result
          }
          this.confirmLoading = false
        })
      },
      OnPerview(record) {
        const fileUrl = `${window._CONFIG['onlinePreviewFileURL']}/sys/common/static${record.path}`
        // const url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(fileUrl)}`
        const url = `${window._CONFIG['onlinePreviewDomainURL']}?url=${encodeURIComponent(Base64.encode(fileUrl))}`
        window.open(url, '_blank')
      },
      OnDownLoad(record) {
        this.$message.success('正在下载，请稍等！')
        const url = `${window._CONFIG['domianURL']}/sys/common/static/${record.path}`
        window.open(url, '_blank')
      },
      OnRemove(record) {
        const fileArr = [...this.model.uploadmodel]
        if (record.path) {
          this.ApiDel(record, {url: record.path})
        }
        for (const item of fileArr) {
          if (record.uid === item.uid) {
            const index = fileArr.indexOf(item)
            fileArr.splice(index, 1)
          }
        }
        this.model.uploadmodel = fileArr
        this.model = Object.assign({}, this.model)
      },
      checkboxChange(record, e) {
        this.confirmLoading = true
        putAction(this.url.startVersion, {
          id: record.id,
          templateId: record.templateId,
          versionStatus: '1',
          version: record.version,
        })
          .then((res) => {
            if (res.success) {
              this.$message.success(res.message)
              this.versionList()
            } else {
              this.$message.warning(res.message)
            }
          })
          .finally(() => {
            this.confirmLoading = false
          })
      },
      submitForm() {
        const that = this
        that.$emit('ok')
        // 触发表单验证
        /* this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            httpAction(httpurl, this.model, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            }).finally(() => {
              that.confirmLoading = false
            })
          }
        })*/
      },
      tableRowClassName(record, index) {
        record.index = index
      }
    },
  }
</script>
<style lang="less" scoped>
  .file-table {
    /deep/ .ant-btn-link {
      padding: 0 5px !important;
    }

    /deep/ .ant-table-thead {
      display: none;
    }

    /deep/ .ant-table-tbody {
      tr {
        width: 100%;
        margin-bottom: 5px !important;
        background: transparent !important;

        td {
          padding: 0 5px;
          border: 0;
          background: transparent !important;
        }
      }
    }
  }

  .year-month {
    margin: 0 -10px;
  }

  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;

    .title {
      font-weight: bold;
      font-size: 15px;
      color: #3955a5;
    }

    .add-ver {
      color: #fff;
      background-color: #3955a5;
      border-color: #3955a5;
    }
  }

  .version {
    padding: 15px;

    header {
      overflow: hidden;
      height: 25px;

      .left {
        float: left;
        font-size: 14px;
        font-weight: bold;
        color: #3955a5;

        .neverStart {
          border-radius: 5px;
          font-size: 12px;
          font-weight: 400;
          color: #fff;
          background-color: #ef9325;
          margin-left: 10px;
        }
      }

      .right {
        float: right;
        justify-content: center;
        justify-items: center;
      }

      .newtag,
      .createTag {
        width: 25px;
        float: right;
        display: block;

        span {
          width: 25px;
          height: 42px;
          display: block;
          position: absolute;
          top: -4px;
          background: url('../../../../../assets/bg-createtext.png') no-repeat 100% 100%;
        }
      }

      .newtag {
        span {
          background: url('../../../../../assets/bg-newtext.png') no-repeat 100% 100%;
        }
      }
    }
  }

  .position-icon {
    position: relative;
    margin-left: 60px;

    .left-sidebar {
      position: absolute;
      top: 0px;
      left: -25px;
      width: 40px;
      height: 100%;
    }

    .version-text {
      position: absolute;
      top: -4px;
      left: -35px;
      color: #3955a5;
      font-weight: 700;
    }

    .icon-styly {
      width: 16px;
      height: 16px;
      border: 1px solid #3955a5;
      background-color: white;
      padding: 2px;
      border-radius: 50%;

      .dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #3955a5;
      }
    }

    .vh-line {
      position: absolute;
      border-left: 3px dashed #3955a5;
      left: 6px;
      top: 16px;
      height: 100%;
    }
  }
</style>
<style scope>
  .version {
    height: 500px;
    overflow: auto;
  }

  .ant-card {
    margin-bottom: 10px;
  }

  .ant-card-body {
    padding: 6px;
  }

  .fileList {
    margin-top: 5px;
  }

  .right {
    display: none;
  }

  .checkShow {
    display: flex;
    justify-content: center;
    justify-items: center;
  }


  .marginRight {
    display: none !important;
    margin-right: 30px;
  }

  .checked {
    background-color: #eefbff;
  }

  .ant-card:hover .right {
    display: flex !important
  }
</style>
